<template>
  <div class="course_info_view">
      <div class="course_view_info">
          <div class="course_view_info_detail">

            <img :src="courseInfo.courseImgUrl" alt="" class="course_info_img">
            <div>

            课程名：{{courseInfo.courseName}}
            </div>
            <div>

            教师：{{courseTeaName}}
            </div>
            <div>

            课程简介：{{courseInfo.courseDesc}}
            </div>
            <div>
                所属班级：{{bindClassName}}
            </div>
            <div>
                开始时间：{{String(courseInfo.createTime).replace("T", " ")}}
                -
                结束时间：{{String(courseInfo.endTime).replace("T", " ")}}
            </div>
          </div>
          <div>
              <div class="leaveMessage-div" @click="recordIsShow = !recordIsShow">
                  留言
              </div>
          </div>
          
      </div>

      <div class="course_info_right">
            <div class="course_view_notice">
                <div>公告 Notice！</div>
                <div>
                    {{notice}}
                </div>
            </div>

            <div class="course_notice" v-show="recordIsShow">
                <problem-editor @editorContent="getContent"></problem-editor>
                <div class="course_notice_btn">

                <el-button style="margin-left:2%;" 
                @click="putRecord"
                type="success" icon="el-icon-check" circle></el-button>
                </div>
            </div>
      </div>

      <!-- <div  class="course_view_work">

      </div> -->

  </div>
</template>

<script>
import * as API from '../api/course/index'
import ProblemEditor from '../components/ProblemEditor.vue'

import {Storage} from '../storage'

export default {
    components:{
        ProblemEditor
    },
    data() {
        return {
            recordIsShow:false,
            courseTeaName:'',
            bindClassName:'',
            courseInfo: {
                courseId:"",
                courseTeaId:'',
            },
            notice:"",
            record:"",
            courseTeaId:'',
            stuId:'',
        }
    },
    methods: {
        getContent(content) {
            this.record = content
        },
        putRecord() {
            API.putRecord({
                mesStuInfo: this.record, 
                mesTeaId: this.courseTeaId,
                mesCourseId: this.courseInfo.courseId
            }).then(res => {
                if (res.code == 200) {
                        this.$notify({
                            title: '成功',
                            message: '留言成功',
                            type: 'success'
                        });
                }else {
                        this.$notify.error({
                            title: '错误',
                            message: '留言失败'
                        });
                }
            }).catch(err => {
                this.$notify.error({
                    title: '错误',
                    message: '留言失败'
                });
            })
        },
        getCourseInfo() {
            API.getCourseInfoById(this.courseInfo.courseId).then(res => {
                        if(res.code == 200) {
                            this.courseInfo = res.data.course
                            

                            let bindClassNames = Array(res.data.course.bindClassNames)
                            for(let i = 0; i < bindClassNames.length; i++) {
                                this.bindClassName +=  bindClassNames[i]
                            }
                        }else {
                            this.$message.error("网络错误 :( ！ err:")
                        }
            }).catch(err => {
                        console.log(err)
                        this.$message.error("网络错误 :( ！ err:", err)
            })
        },
        getNotice(courseId) {
            API.getNotice(courseId).then(res => {
                if (res.code == 200) {
                    this.notice = res.data.notice
                }
            })
        }
    },
    mounted() {
         console.log(this.$route.params.courseInfo )
        if ( this.$route.params.courseInfo == undefined) {
            console.log(this.$route.params.courseInfo )
                this.$router.push(
                    {name:"Course"}
                )
        }else {
            this.courseInfo = this.$route.params.courseInfo
            this.courseTeaId = this.$route.params.courseInfo.courseTeaId
            this.courseTeaName = this.$route.params.courseInfo.courseTeaName
            this.getCourseInfo()
            this.getNotice(this.courseInfo.courseId);
        }

    }
}
</script>

<style>
.course_info_view {
  width: 100%;
  min-height: 750px;
  max-height: 750px;
  margin-top: 8%;
  margin-right: 0%;
  display: flex;
  /* flex-direction: column; */
  /* align-items: center; */
  justify-content: space-around;

  /* border-top-left-radius: 40px; */
  border-radius: 40px;
  background-color: whitesmoke;
  padding-bottom: 10px;
}

.course_view_info {
    display: flex;
    justify-content: space-around;
    align-items: center;

    margin-top: 4%;
    margin-left: 5%;
    align-self: flex-start;
    width: 50%;
    background-color: white;
    box-shadow: 0 2px 12px 0px rgb(0 0 0 / 13%);
    border-radius: 15px;
    /* height: 150px; */
    padding: 2%;
}

.course_view_info_detail {
    padding: 2%;
    display: flex;
    flex-direction: column;
    word-wrap: break-word;
    word-break: normal;
}

.course_info_img {
    width: 450px;
    height: 252px;
    border-radius: 15px;

}

.course_view_info_label {
    margin-top: 2px;
}

.course_view_work {
     margin-top: 4%;
     background-color: white;
     align-self: flex-start;
     margin-left: 5%;
     width: 90%;
     border-radius: 15px;
     min-height: 550px;
}

.leaveMessage-div {
    cursor: pointer;
    align-self: flex-end;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    line-height: 50px;
    text-align: center;
    box-shadow: 0 2px 12px 0px rgb(0 0 0 / 13%);
}

.course_info_right {
    width: 28%;
    margin-top: 4%;
    display: flex;
    flex-direction: column;
    align-self: flex-start;
} 

.course_view_notice {
    /* width: 25%; */
    width: 96%;
    /* margin-top: 4%; */
    background-color: white;
    box-shadow: 0 2px 12px 0px rgb(0 0 0 / 15%);
    border-radius: 15px;
    
    /* height: 150px; */
    padding: 2%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}


.course_notice {
    margin-top: 10%;
    background-color: white;
    width: 96%;
    border-radius: 15px;
    box-shadow: 0 2px 12px 0px rgb(0 0 0 / 15%);
    padding: 2%;
    display: flex;
    justify-content: center;
    align-self: flex-start;
}

.course_notice_btn {
    align-self: center;
}

.course_notice .ql-editor {
    height: 200px;
}
</style>